<template>
  <div>
    <div>
    <van-swipe :autoplay="3000" class="swipe" :show-indicators='falg' >
  <van-swipe-item v-for="(item) in list" :key="item.id">
    <img v-lazy="item.imgSrc" />
  </van-swipe-item>
  </van-swipe>
</div>
  <div class="ipn">
    <van-cell-group>
  <van-field class="ipn1" v-model="value" label="文本" placeholder="请输入用户名" @click="ipn" />
  </van-cell-group>
  <i class="el-icon-location-outline"></i>
  </div>
  <van-grid class="gong">
  <van-grid-item icon="cashier-o" text="整租" />
  <van-grid-item icon="user-circle-o" text="合租" to='/layou/housing' />
  <van-grid-item icon="qr-invalid" text="地图找房" />
  <van-grid-item icon="idcard" text="去出租" />
</van-grid>
<van-nav-bar
  left-text="租房小组"
  right-text="更多"
  :left-arrow = false
  @click-left="onClickLeft"
  @click-right="onClickRight"
  class="zu"
/>
  <div class="da">
    <div class="xiao" v-for="item in list1" :key="item.id">
      <div class="pian">
        <img v-lazy="item.imgSrc" />
      </div>
      <div class="txt">
        {{item.desc}}<br>
        {{item.title}}
      </div>
    </div>
  </div>
  
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  name: 'HaokeHomepage',

  data() {
    return {
      
      list: [],
      falg:false,
      value:'',
      list1:[]
    };
  },
  
  created(){
    this.getList()
    this.zuFang()
  },
  methods: {
    async getList(){
      const res = await this.$http.get('/home/swiper')
      // console.log(res.data.body);
      this.list = res.data.body
      // console.log(this.list);
    },
    onChange(index) {
      Toast('当前 Swipe 索引：' + index);
    },
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
    async zuFang(){
      const res = await this.$http.get('/home/groups')
      console.log(res.data.body);
      this.list1 = res.data.body
    },
    ipn(){
      this.$router.push('/layou/Cities')
    }
  },
};
</script>

<style lang="less" scoped>
.swipe {
  position: relative;
  width: 100%;
  height: 290px;
  img {
    width: 100%;
  }
}
.ipn {
  display: flex;
  position: absolute;
  // align-items: center;
  justify-content: center;
  top: 20px;
  left: 15px;
  // background-color: pink;
  width: 88%;
  height: 20px;
  .ipn1 {
    width: 100%;
  }
  i {
    font-size: 30px;
    position: relative;
    right: -5px;
    top: 5px;
    color: #fff;
  }

}
.gong {
  position: relative;
  top: -60px;
}
.zu {
  position: relative;
  top: -40px;
}
.da {
  position: relative;
  top: -50px;
  padding: 10px;
  display: flex;
  // justify-content: center;
  // align-items: center;
  flex-wrap: wrap;
  margin: 0 auto;
  // flex-grow: row wrap;
  .xiao {
    margin-left: -5px;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    // flex-grow: row wrap;
    .pian {
      margin-right: 30px;
      img {
      width: 50px;
      height: 50px;
     }
    }
    .txt {
      font-size: 15px;
      margin-left: -10px;
    }
  }
  
}
</style>